import React from 'react'
import { Skeleton, Button } from 'antd';

import './panelbar.css'

/**
 * 面板导航
 * bars：{title:xxx,icon:xxx} 导航数据
 * loading 是否加载中
 * onChange(key) 当切换的时候发生
 */
class PanelBar extends React.Component {

    state={
        active:0,
        over:-1,
    }

    clickHandle=(key)=>{
        if (this.state.active == key) {
            return
        }
        this.setState({active:key})
        this.props.onChange &&this.props.onChange(key)
    }

    render() {
        const {bars,loading} = this.props;
        const {active,over} = this.state;
        return (
            <div className="panel_bar">
                <div className="barbox">
                    {bars.map((val, key)=>(
                        <div key={key} className={`bar ${active==key?'active':''} ${over==key?'over':''}`} 
                        onMouseOver={()=>{this.setState({'over':key})}}
                        onMouseOut={()=>{this.setState({'over':-1})}}
                        onClick={()=>this.clickHandle(key)}>
                            {val.icon}&nbsp;&nbsp;&nbsp;{val.title}
                        </div>
                    ))}
                </div>
                
                <div>
                    <Skeleton active avatar loading={loading}>
                    {this.props.children}
                    </Skeleton>
                </div>
            </div>
        )
    }
}

export default PanelBar